<template>
  <div class="personal_box knife_container">
    <el-row :gutter="20">
      <el-col :span="4" class="nav_list" style="padding: 0 0 20px;">
        <span class="title">采购中心</span>
        <router-link :to="{name:'orderManage'}">我的订单</router-link>
        <router-link :to="{name:'rebateMember'}">会员返利</router-link>
        <router-link :to="{name:'giftsCenter'}">礼包中心</router-link>
        <span class="title">个人资料</span>
        <router-link :to="{name:'memberCenter'}">个人信息</router-link>
        <router-link :to="{name:'discountVoucher'}">优惠卡券</router-link>
        <router-link :to="{name:'safeCenter'}">安全中心</router-link>
        <router-link :to="{name:'recevieAddr'}">收货地址</router-link>
        <router-link :to="{name:'invoiceList'}">发票信息</router-link>
        <span class="title">售后中心</span>
        <router-link :to="{name:'feedback'}">意见反馈</router-link>
        <span class="title">消息中心</span>
        <router-link :to="{name:'systemMsg'}">系统消息</router-link>
        <router-link :to="{name:'inquiryMsg'}">询货消息</router-link>
      </el-col>
      <el-col :span="20" >
        <div class="person_content">
          <transition name="el-fade-in-linear" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {Row, Col} from 'element-ui'
  export default{
    components: {
      elRow: Row,
      elCol: Col
    }
  }
</script>
<style lang="scss" scoped>
  
  $yellow: #FFCC00;
  $gray33:#333333;
  $white: #ffffff;
  .personal_box{
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .nav_list{
    background: #525252;
    padding-bottom: 20px;
    border-radius: 2px!important;
    a, .title{
      display:inline-block;
      width: calc( 100% - 30px);
      padding-left: 30px;
      line-height: 40px;
    }
    a{
      color: #a5a3a3;
      font-size: 16px;
      &.router-active{
        background: $yellow;
        color: $gray33;
      }
      &:hover{
        background-color: $yellow;
        color: $gray33;
      }
    }
    .title {
      margin-top: 25px;
      font-size: 18px;
      color: $white;
    }
  }
  .person_content{
    background: $white;
    border-radius: 2px;
    padding: 26px 52px;
    min-height: 668px;
  }
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
</style>
<style lang="scss">
  // 退货弹窗
  .pop{
    width: 480px;
    z-index: 2018;
    border-radius: 10px;
    background: #ffffff;
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    .pop-close{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .pop-header{
      font-size: 18px;
      color:rgba(48,48,48,1);
      line-height:25px;
      padding: 18px 0;
      border-bottom: 1px dashed #eeeeee;
    }
    .sale-content{
      padding: 20px 20px 30px;
      .title{
        margin-bottom: 30px;
        color: #303030;
        font-size: 16px;
      }
    }
    .sale-order{
      display: inline-block;
      text-align: left;
      color: #303030;
      line-height: 22px;
    }
    .sale-line{
      margin-bottom:10px;
      line-height:20px;
      color: #666666;
      .input-tit{
        width: 30%;
        display: inline-block;
        text-align:right;
        padding-right: 5px;
      }
      .sale-input{
        width: 66%;
      }
    }
    .btn-pop-yellow {
      display: inline-block;
      text-align: center;
      width: 200px;
      height: 50px;
      line-height: 50px;
      color: #303030;
      background: #FFE100;
      cursor: pointer;
      border-radius: 5px;
    }
    .btn-pop-gray{
      background: #E6E6E6;
      color: #bbb;
    }
  }
  .line{
    background: #F7F7F7;
    height: 2px;
  }
  .ad_box_block{
    background: #ffffff;
    padding-top:40px;
    text-align: center;
    .qrcode{
      display: inline-block;
      width: 126px;
      height: 126px;
      margin-bottom: 15px;
    }
    .text_big{
      @include fontbase(#333333, 18px, 25px)
    }
    .text_small{
      @include fontbase(#666666, 16px, 22px)
    }
  }
</style>
